<template>
<div>
    <div>
        <h3>帐号信息：{{companyInfo.name}}</h3>
        <h3>当前层级信息：
          <Tag v-if="choiceInfo.grade==='3'" color="primary">区</Tag>
          <Tag v-if="choiceInfo.grade==='4'" color="primary">街道</Tag>
          <Tag v-if="choiceInfo.grade==='5'" color="primary">社区</Tag>
          <Tag v-if="choiceInfo.grade==='5.5'" color="primary">小区</Tag>
          <Tag v-if="choiceInfo.grade==='6'" color="primary">网格</Tag>
          <Tag v-if="choiceInfo.grade==='7'" color="primary">楼</Tag>
          <Tag v-if="choiceInfo.grade==='8'" color="primary">单元</Tag>
<!--          {{Object.keys(choiceInfo).length === 0 ? company_info.name : choiceInfo.name}}-->
          {{choiceInfo.name}}
        </h3>
      <div>
        <Button v-if="companyInfo.grade === '4' || companyInfo.grade === '5'" type="success" size="small" @click="updateCommunityMarker" style="margin-right: 5px">绘制中心点</Button>
        <Button v-if="companyInfo.grade === '5'" type="success" size="small" style="margin-right: 5px" @click="clickSchool">人员录入</Button>
        <!--        <Button v-if="companyInfo.grade === '4' || companyInfo.grade === '5'" type="success" size="small" @click="updateCommunityPolygon">绘制范围</Button>-->
      </div>
      <h3>社区基本信息维护：<Button size="small" type="success" style="margin-right: 5px" @click="clickCommunityModal">编辑</Button></h3>
    </div>
  <Modal
      v-model="schoolInfo.Modal"
      width="1300"
      title="信息录入">
    <Form :model="schoolInfo.info" :label-width="100" style="padding-top: 20px">
      <Row v-for="(item,index) in schoolInfo.info.dataList" :key="index">
        <Col span="2">
        </Col>
        <Col span="6">
          <FormItem label="选择类型">
            <Select v-model="item.type" style="width:200px" disabled>
              <Option value="1">高校（大专及以上学校）</Option>
              <Option value="2">监狱，看守所</Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="6">
          <FormItem label="名称">
            <Input style="width: 200px" v-model="item.name" disabled></Input>
          </FormItem>
        </Col>
        <Col span="6">
          <FormItem label="人数">
            <Input style="width: 200px" v-model="item.people_num" disabled></Input>
          </FormItem>
        </Col>
        <Col span="1">
          <FormItem>
            <Icon style="line-height: 37px" size="20" type="md-close-circle" @click="clickDeleteSchoolInfo(item)"/>
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col span="2">
        </Col>
        <Col span="6">
          <FormItem label="选择类型">
            <Select v-model="schoolInfo.info.create.type" style="width:200px">
              <Option value="1">高校（大专及以上学校）</Option>
              <Option value="2">监狱，看守所</Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="6">
          <FormItem label="名称">
            <Input style="width: 200px" v-model="schoolInfo.info.create.name"></Input>
          </FormItem>
        </Col>
        <Col span="6">
          <FormItem label="人数">
            <Input style="width: 200px" v-model="schoolInfo.info.create.people_num"></Input>
          </FormItem>
        </Col>
        <Col span="1">
          <FormItem>
            <Icon style="line-height: 37px" size="20" type="md-checkmark" @click="clickCreateSchoolInfo"/>
          </FormItem>
        </Col>
      </Row>
    </Form>
  </Modal>
  <Modal
      v-model="communityMarker.Modal"
      :title="communityMarker.title"
      @on-ok="communityMarkerConfirm">
    <div style="width: 80%">
      <Form :model="communityMarker.info" :label-width="100">
        <FormItem label="社区坐标">
          <Row>
            <Col span="20">
              <Input v-if="mapType === 'GD'" style="width: 180px" disabled v-model="communityMarker.info.csc_mapjson"></Input>
              <Input v-if="mapType === 'HT'" style="width: 180px" disabled v-model="communityMarker.info.csc_mapjson_ht"></Input>
            </Col>
            <Col span="4">
              <Button style="margin-left: 5px" @click="clickCommunityPoint">选择</Button>
            </Col>
          </Row>
        </FormItem>
      </Form>
    </div>
  </Modal>
  <Modal
      v-model="communityPolygon.Modal"
      :title="communityPolygon.title"
      @on-ok="communityPolygonConfirm">
    <div style="width: 80%">
      <Form :model="communityPolygon.info" :label-width="100">
        <FormItem label="社区范围">
          <Row>
            <Col span="20">
              <Input style="width: 180px" disabled v-model="communityPolygon.info.company_scope"></Input>
            </Col>
            <Col span="4">
              <Button style="margin-left: 5px" @click="clickCommunityPolygon">选择</Button>
            </Col>
          </Row>
        </FormItem>
      </Form>
    </div>
  </Modal>
  <HTMapMarkerForCommunity @HTreturnMapMarkerInfoCommunity="HTreturnMapMarkerInfoCommunity" ref="HTmapmarkerforcommunity"></HTMapMarkerForCommunity>
  <map-marker-for-community @returnMapMarkerInfoCommunity="returnMapMarkerInfoCommunity" ref="mapmarkerforcommunity"></map-marker-for-community>
  <map-polygon-for-community @returnMapPolygonInfoForCommunity="returnMapPolygonInfoForCommunity" ref="mappolygonforcommunity"></map-polygon-for-community>
  <Modal
      v-model="CommunityModal"
      title="完善社区基本信息"
      @on-ok="saveCommunityModal">
    <Form :model="communityDetail" :label-width="120">
      <FormItem label="社区服务电话">
        <Input v-model="communityDetail.community_mobile" placeholder="请输入社区电话"></Input>
      </FormItem>
      <FormItem label="社区地址">
        <Input v-model="communityDetail.address" placeholder="请输入地址"></Input>
      </FormItem>
<!--      <FormItem label="社区书记">-->
<!--        <Input v-model="communityDetail.sqsj" placeholder="请输入社区书记姓名"></Input>-->
<!--      </FormItem>-->
<!--      <FormItem label="社区书记电话 ">-->
<!--        <Input v-model="communityDetail.sqsjdh" placeholder="请输入社区书记电话"></Input>-->
<!--      </FormItem>-->
      <FormItem label="社区面积">
        <Input v-model="communityDetail.area" placeholder="请输入面积">
          <span slot="append">㎡</span>
        </Input>
      </FormItem>
      <FormItem label="社区简介">
        <Input v-model="communityDetail.detail" maxlength="150" show-word-limit type="textarea" placeholder="请输入简介"></Input>
      </FormItem>
      <FormItem>
        <Row class="bench_search">
          <div class="demo-upload-list" v-for="(item,index) in imgList" :key="index">
            <img :src="item">
            <div class="demo-upload-list-cover">
              <Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>
              <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
            </div>
          </div>
          <Upload
              ref="upload"
              :show-upload-list="false"
              :format="['jpg','jpeg','png']"
              :max-size="2048"
              :before-upload="handleBeforeUpload"
              multiple
              type="drag"
              action="//jsonplaceholder.typicode.com/posts/"
              style="display: inline-block;width:58px;">
            <div style="width: 58px;height:58px;line-height: 58px;">
              <Icon type="ios-camera" size="20"></Icon>
            </div>
          </Upload>
          <Modal title="查看图片" v-model="visible">
            <img :src="imgListShow" v-if="visible" style="width: 100%">
          </Modal>
        </Row>
<!--        <Upload multiple action="http://120.27.63.37:38081/api/ac/file/fileCommonService/upLoadFiles" :before-upload="beforeUpload">-->
<!--          <img v-if="communityDetail.imgShow || communityDetail.label_img" :src="communityDetail.label_img" style="width: 50px;height: 50px;margin-bottom: 20px"/>-->
<!--          <Button icon="ios-cloud-upload-outline" style="margin-bottom: 20px">上传社区图片</Button>-->
<!--        </Upload>-->
      </FormItem>
    </Form>
  </Modal>
</div>
</template>

<script>

import MapMarkerForCommunity from '../map-marker-for-community'
import MapPolygonForCommunity from '../map-polygon-for-community'
import { changeCommunityCenter, changeCommunityRange } from '../../../../api/z-new-grid'
import { createUpLoadFiles, getSign } from '../../../../api/common'
import {
  createSchoolInfo, deleteSchoolInfo,
  findCommunitySchoolList,
  getCompanyDetailByCode,
  saveCompanyDetail
} from '../../../../api/eventlist'
import HTMapMarkerForCommunity from '../HT-marker-for-community'
import { mapTypeChange } from '../../../../libs/mapTypeUtil'
export default {
  name: 'communityInfo',
  components: { HTMapMarkerForCommunity, MapPolygonForCommunity, MapMarkerForCommunity },
  props: {
    choiceInfo: {
      type: Object
    },
    companyInfo: {
      type: Object
    }
  },
  data () {
    return {
      schoolInfo: {
        Modal: false,
        info: {
          dataList: [],
          create: {}
        }
      },
      mapType: '',
      upPicData: {
        fileName: 'label',
        filePath: 'grid/label'
      },
      CommunityModal: false,
      communityDetail: {
        imgShow: false
      },
      communityMarker: {
        Modal: false,
        info: {},
        title: ''
      },
      communityPolygon: {
        Modal: false,
        info: {},
        title: ''
      },
      imgList: [],
      visible: false,
      imgListShow: ''
    }
  },
  methods: {
    clickDeleteSchoolInfo (e1) {
      deleteSchoolInfo(e1).then(ret => {
        if (ret.data.errcode === 0) {
          this.findCommunitySchoolList()
          this.$Notice.success({ title: '删除成功！', desc: ret.data.errmsg })
        } else {
          this.$Notice.error({ title: '删除失败！', desc: ret.data.errmsg })
        }
      })
    },
    clickCreateSchoolInfo () {
      if (this.schoolInfo.info.create.type === undefined || this.schoolInfo.info.create.type === '') {
        this.$Notice.error({ title: '保存失败！', desc: '请选择类型！' })
        return
      }
      if (this.schoolInfo.info.create.name === undefined || this.schoolInfo.info.create.name === '') {
        this.$Notice.error({ title: '保存失败！', desc: '请填写名称！' })
        return
      }
      if (this.schoolInfo.info.create.people_num === undefined || this.schoolInfo.info.create.people_num === '') {
        this.$Notice.error({ title: '保存失败！', desc: '请填写人数！' })
        return
      }
      createSchoolInfo(this.schoolInfo.info.create).then(ret => {
        if (ret.data.errcode === 0) {
          this.schoolInfo.info.create = {}
          this.findCommunitySchoolList()
          this.$Notice.success({ title: '保存成功！', desc: ret.data.errmsg })
        } else {
          this.$Notice.error({ title: '保存失败！', desc: ret.data.errmsg })
        }
      })
    },
    clickSchool () {
      this.findCommunitySchoolList()
    },
    findCommunitySchoolList () {
      findCommunitySchoolList().then(ret => {
        if (ret.data.errcode === 0) {
          this.schoolInfo.info.dataList = ret.data.data
          this.schoolInfo.Modal = true
        } else {
          this.$Notice.error({ title: '查询失败！', desc: ret.data.errmsg })
        }
      })
    },
    handleView (img) {
      this.imgListShow = img
      this.visible = true
    },
    handleRemove (file) {
      this.imgList.splice(this.imgList.indexOf(file), 1)
    },
    handleBeforeUpload (file) {
      const check = this.imgList.length < 3
      if (!check) {
        this.$Notice.warning({
          title: '最多上传3张图片'
        })
        return check
      }
      this.beforeUpload(file)
    },
    updateCommunityMarker () {
      this.communityMarker.Modal = true
      this.communityMarker.title = '编辑社区中心点'
      this.communityMarker.info.csc_mapjson = this.companyInfo.csc_mapjson
      this.communityMarker.info.csc_mapjson_ht = this.companyInfo.csc_mapjson_ht
    },
    updateCommunityPolygon () {
      this.communityPolygon.Modal = true
      this.communityPolygon.title = '编辑社区范围'
      this.communityPolygon.info.company_scope = this.companyInfo.company_scope
    },
    clickCommunityPoint () {
      if (this.mapType === 'GD') {
        this.$refs.mapmarkerforcommunity.init(this.choiceInfo, this.companyInfo)
      }
      if (this.mapType === 'HT') {
        this.$refs.HTmapmarkerforcommunity.init(this.choiceInfo, this.companyInfo)
      }
    },
    clickCommunityPolygon () {
      this.$refs.mappolygonforcommunity.init(this.choiceInfo, this.companyInfo)
    },
    communityMarkerConfirm () {
      let data = {}
      if (this.mapType === 'HT') {
        data.mapType = 'HT'
        data.csc_mapjson_ht = this.communityMarker.info.csc_mapjson_ht
      }
      if (this.mapType === 'GD') {
        data.mapType = 'GD'
        data.csc_mapjson = this.communityMarker.info.csc_mapjson
      }
      changeCommunityCenter(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({ title: '保存成功', desc: ret.data.errmsg })
        } else {
          this.$Notice.error({ title: '保存失败', desc: ret.data.errmsg })
        }
      })
    },
    communityPolygonConfirm () {
      if (Object.keys(this.communitypolygonResult).length !== 0) {
        if (!this.communitypolygonResult.result) {
          this.$Notice.error({ title: '绘制失败！', desc: '社区范围未完全包含' + this.communitypolygonResult.name })
          return
        }
      }
      let data = {
        company_scope: this.communityPolygon.info.company_scope
      }
      changeCommunityRange(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({ title: '保存失败', desc: ret.data.errmsg })
        } else {
          this.$Notice.error({ title: '保存失败', desc: ret.data.errmsg })
        }
      })
    },
    returnMapPolygonInfoForCommunity (e) {
      this.communitypolygonResult = e.polygonResult
      this.communityPolygon.info.company_scope = e.company_scope
      this.communityPolygon.Modal = false
      this.$nextTick(() => {
        this.communityPolygon.Modal = true
      })
    },
    returnMapMarkerInfoCommunity (e) {
      this.communityMarker.info.csc_mapjson = e.csc_mapjson
      this.communityMarker.Modal = false
      this.$nextTick(() => {
        this.communityMarker.Modal = true
      })
    },
    HTreturnMapMarkerInfoCommunity (e) {
      this.communityMarker.info.csc_mapjson_ht = e.csc_mapjson_ht
      this.communityMarker.Modal = false
      this.$nextTick(() => {
        this.communityMarker.Modal = true
      })
    },
    beforeUpload (file) {
      this.upPicData.fileName = 'label'
      this.upPicData.filePath = 'grid/label'
      var time = new Date().getTime()
      let timeStep = time.toString()
      let that = this
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = () => {
        let index = reader.result.indexOf('base64,') + 7
        that.upPicData.fileName = that.upPicData.fileName + timeStep + '.' + file.type.substring(6)
        that.upPicData.file = reader.result.substring(index)
        that.upPic(that.upPicData)
      }
      return false
    },
    upPic (obj) {
      var time = new Date().getTime()
      let timeStep = time.toString()
      let param = {
        filePath: obj.filePath,
        fileName: obj.fileName,
        timestamp: timeStep
      }
      getSign(param).then(res => {
        if (res.data.errcode === 0) {
          let url = res.data.data.docking_url
          let params = {
            sign: res.data.data.sign,
            timestamp: timeStep,
            filePath: obj.filePath,
            fileName: obj.fileName,
            file: obj.file
          }
          createUpLoadFiles(url, params).then(res => {
            if (res.data.errcode === 0) {
              let url = res.data.data
              this.imgList.push(url)
            } else {
              this.$Notice.error({ title: '上传失败', desc: res.data.data.msg })
            }
          })
        } else {
          this.$Notice.error({ title: '上传失败', desc: res.data.data.msg })
        }
      })
    },
    saveCommunityModal () {
      this.communityDetail.label_img = this.imgList.join(',')
      if (this.communityDetail.detail === '' || this.communityDetail.detail === undefined) {
        this.$Notice.error({ title: '缺少必填信息', desc: '缺少社区简介！' })
        return
      }
      if (this.communityDetail.community_mobile === '' || this.communityDetail.community_mobile === undefined) {
        this.$Notice.error({ title: '缺少必填信息', desc: '缺少社区电话！' })
        return
      }
      if (this.communityDetail.area === '' || this.communityDetail.area === undefined) {
        this.$Notice.error({ title: '缺少必填信息', desc: '缺少社区面积！' })
        return
      }
      if (this.communityDetail.label_img === '' || this.communityDetail.label_img === undefined) {
        this.$Notice.error({ title: '缺少必填信息', desc: '缺少社区图片！' })
        return
      }
      if (this.communityDetail.address === '' || this.communityDetail.address === undefined) {
        this.$Notice.error({ title: '缺少必填信息', desc: '缺少社区地址！' })
        return
      }
      // if (this.communityDetail.sqsj === '' || this.communityDetail.sqsj === undefined) {
      //   this.$Notice.error({ title: '缺少必填信息', desc: '缺少社区书记姓名！' })
      //   return
      // }
      // if (this.communityDetail.sqsjdh === '' || this.communityDetail.sqsjdh === undefined) {
      //   this.$Notice.error({ title: '缺少必填信息', desc: '缺少社区书记电话！' })
      //   return
      // }
      saveCompanyDetail(this.communityDetail).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({ title: '保存成功！', desc: ret.data.msg })
        } else {
          this.$Notice.error({ title: '查询失败！', desc: ret.data.msg })
        }
      })
    },
    clickCommunityModal () {
      getCompanyDetailByCode().then(ret => {
        if (ret.data.errcode === 0 || ret.data.errcode === 10003) {
          if (ret.data.errcode === 0) {
            this.communityDetail = ret.data.data
            this.imgList = this.communityDetail.label_img.split(',')
          }
          this.CommunityModal = true
        } else {
          this.$Notice.error({ title: '查询失败！', desc: ret.data.msg })
        }
      })
    }
  },
  mounted () {
    if (this.$route.query.mapType === 'HT') {
      this.mapType = 'HT'
    } else {
      this.mapType = mapTypeChange()
    }
  }
}
</script>

<style scoped>

</style>
